{% extends 'base.html' %}

{% load static %}

{% block title %}
    {% if category %}
        {{ category.name }} - {{ site_settings.site_name }}
    {% else %}
        Note - {{ site_settings.site_name }}
    {% endif %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <section class="left"
                 style="background-image: url('https://cux.huitheme.cn/wp-content/uploads/2020/02/202002050420313-scaled.jpeg');">
        </section>
        <!-- 包含 sidebar 模板 -->
        {% include 'sidebar.html' %}
        <section class="right">
            <div class="nav_ico">
                <svg class="ham hamRotate ham1" viewBox="0 0 100 100" onclick="this.classList.toggle('active')">
                    <path class="line top"
                          d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40">
                    </path>
                    <path class="line middle" d="m 30,50 h 40"></path>
                    <path class="line bottom"
                          d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40">
                    </path>
                </svg>
            </div>
            <div class="right_box">
                <div class="single_info_box">
                    <h1 class="single_title">
                        <!-- 判断是否有分类名称,如果有则显示,如果没有显示Note -->
                        {% if category %}
                            {{ category.name }}
                        {% else %}
                            Note
                        {% endif %}
                    </h1>
                    <div class="single_info cat_info">
                        <p>
                            <!-- 分类描述 -->
                            {% if category %}
                                {{ category.description }}
                            {% else %}
                                装逼和记事本并存；本想是存一些日常代码的，但会暴露自己的实际知识水准 {
                                当我看到你存的一些小儿科代码的时候，我就知道你也只是个辣鸡 }，想想还是纯装逼吧。
                            {% endif %}
                        </p>
                    </div>
                </div>
                <div class="posts-loop">

                    {% for post in article_list %}
                        <article class="single_loop single_def post">
                            <a class="single_loop_pic" rel="nofollow" href="{{ post.get_absolute_url }}">
                                <img src="
                                        
                                        {% if post.cover %}{{ post.cover.url }}{% else %}https://cux.huitheme.cn/wp-content/uploads/2020/02/202002050420313-scaled.jpeg{% endif %}"
                                     alt="{{ post.title }}"/>
                            </a>
                            <div class="single_loop_info">
                                <h2>
                                    <a class="" href="{{ post.get_absolute_url }}"
                                       title="{{ post.title }}">
                                        {{ post.title|truncatechars:50 }}
                                    </a>
                                </h2>
                                <div class="single_info">
								<span>
									<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-clock-history"
                                         fill="currentColor" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd"
                                              d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"></path>
										<path fill-rule="evenodd"
                                              d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z"></path>
										<path fill-rule="evenodd"
                                              d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"></path>
									</svg>
                                    {% if post.created_at %}
                                        {{ post.created_at|date:"Y-m-d" }}
                                    {% endif %}
                                </span>
                                    <span>
									<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-justify-left"
                                         fill="currentColor" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd"
                                              d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
									</svg>
                                        <!-- 所属分类超链接 -->
                                        {% if post.category %}
                                            <a href="{{ post.category.get_absolute_url }}"
                                               rel="category tag">
                                                {{ post.category.name }}
                                            </a>
                                        {% endif %}

                                </span>
                                    <span>
									<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-layers"
                                         fill="currentColor" xmlns="http://www.w3.org/2000/svg">
										<path fill-rule="evenodd"
                                              d="M3.188 8L.264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l-1.063.567L14.438 10 8 13.433 1.562 10 4.25 8.567 3.187 8z"></path>
										<path fill-rule="evenodd"
                                              d="M7.765 1.559a.5.5 0 0 1 .47 0l7.5 4a.5.5 0 0 1 0 .882l-7.5 4a.5.5 0 0 1-.47 0l-7.5-4a.5.5 0 0 1 0-.882l7.5-4zM1.563 6L8 9.433 14.438 6 8 2.567 1.562 6z"></path>
									</svg>
                                        <!-- 点击量 -->
                                    {{ post.click_count }}
                                </span>
                                </div>
                                <p class="single_loop_txt">
                                    {% if post.description %}
                                        {{ post.description|striptags|truncatechars:160 }}
                                    {% else %}
                                        {{ post.content|striptags|truncatechars:160 }}
                                    {% endif %}
                                </p>
                            </div>
                        </article>
                    {% endfor %}

                </div>
                <div class="post-read-more">
                    <!-- 分页 -->
                    <div class="pagination">
                    <span class="step-links">
                        {% if page_obj.has_previous %}
                            <a href="?page=1" class="prev">首页</a>
                            <a href="?page={{ page_obj.previous_page_number }}" class="prev">上一页</a>
                        {% endif %}
                        <span class="current">
                            第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页
                        </span>
                        {% if page_obj.has_next %}
                            <a href="?page={{ page_obj.next_page_number }}" class="next">下一页</a>
                            <a href="?page={{ page_obj.paginator.num_pages }}" class="next">尾页</a>
                        {% endif %}
                    </span>
                    </div>
                </div>
            </div>

            <!-- 包含 foot 模板 -->
            {% include 'foot.html' %}
        </section><!--right-->
    </div>
{% endblock %}
